import React from 'react'
import {Spin, Tree} from 'antd'
import type {DataSourceTreeNode, DataSourceTreeProps} from './types'

const DataSourceTree: React.FC<DataSourceTreeProps> = ({ data, loading, selectedKeys, onSelect }) => {
  const treeData = (data || []) as any

  return (
    <div>
      {loading ? (
        <div style={{ textAlign: 'center', padding: 20 }}>
          <Spin />
        </div>
      ) : (
        <Tree
          treeData={treeData}
          defaultExpandAll
          selectable
          selectedKeys={selectedKeys}
          onSelect={(_keys, info) => {
            const node = info.node as unknown as DataSourceTreeNode
            onSelect?.(node)
          }}
          style={{
            background: 'transparent',
            fontSize: 13
          }}
        />
      )}
    </div>
  )
}

export default DataSourceTree